body {
    min-width : 320px;
    max-width : 750px;
    margin    : 0 auto;
    width     : 100vw;
    position  : relative;
}


.jf_pay_wrap {
    .header_wrap {
        padding   : 0.32rem 1.333333rem;
        background: #FFF8DF;
        display   : flex;

        img {
            width       : 0.853333rem;
            height      : 0.853333rem;
            margin-right: 0.373333rem;
        }

        p {
            color    : #FEBE3A;
            font-size: 0.693333rem;
            a{
                color    : #FEBE3A;
                font-size: 0.693333rem; 
                text-decoration: none;
            }
        }
    }

    .content {
        padding   : 0.533333rem;
        background: linear-gradient(180deg, #F4D886 0%, rgba(255, 255, 255, 0) 100%);
        ;

        .pay_wrap {
            padding      : 0.533333rem;
            background   : #fff;
            border-radius: 0.213333rem;

            .header_box {
                padding-bottom: 0.4rem;
                border-bottom :1px solid #F8F8F8;

                h2 {
                    color    : #1A1A1A;
                    font-size: 1.466667rem;
                    font-weight: normal;
                }

                p {
                    margin-top: 0.16rem;
                    font-size: 0.693333rem;
                    color    : #B77400;
                }
            }

            .card_type {
                h3 {
                    padding-top   : 0.773333rem;
                    padding-bottom: 0.32rem;
                    color         : #323232;
                    font-size     : 0.746667rem;
                    font-weight: normal;
                }

                ul {
                    display        : flex;
                    justify-content: space-between;
                    align-items    : center;

                    li {
                        position     : relative;
                        width        : 8.453333rem;
                        height       : 5.28rem;
                        background   : #fff;
                        border-radius: 0.32rem;
                        border       : 0.053333rem solid #EBEBEB;
                        box-sizing   : border-box;
                        padding      : 0 0.426667rem;

                        &.active {
                            background: #FFF8DF;
                            border    : 0.053333rem solid #FFD276;
                            h2{
                                color: #323232;
                            }
                            p {
                                font-size: 0.64rem;
                                color    : #B77400;
                            }
                        }

                        h2 {
                            padding-top   : 1.066667rem;
                            color         : #A2A2B6;
                            font-size     : 0.853333rem;
                            padding-bottom: 0.186667rem;
                        }

                        p {
                            font-size: 0.64rem;
                            color    : #999999;
                        }

                        .ab_wrap {
                            position: absolute;
                            right   : -1px;
                            bottom  : -1px;

                            img {
                                width : 1.173333rem;
                                height: 1.2rem;
                            }
                        }
                    }
                }

                dl {
                    padding: 1.36rem 0;

                    dd {
                        padding        : 0.533333rem 0;
                        border-bottom  : 1px solid #F8F8F8;
                        display        : flex;
                        justify-content: flex-start;
                        align-items    : center;

                        h4 {
                            font-weight: normal;
                            font-size   : 0.746667rem;
                            color       : #666666;
                            margin-right: 0.533333rem;
                        }

                        span {
                            color      : #B77400;
                            font-weight: bold;
                            font-size  : 0.8rem;
                        }
                    }
                }
            }

            .rule_wrap {
                margin     : 0 auto;
                margin-top : 10.666667rem;
                width      : 14rem;
                display    : flex;
                align-items: center;

                input {
                    width                      : 0.96rem;
                    height                     : 0.96rem;
                    border                     : 1px solid #666666;
                    background                 : #fff;
                    border-radius              : 50% !important;
                    outline                    : none;
                    -webkit-appearance         : none;
                    -webkit-tab-highlight-color: rgba(0, 0, 0, 0);
                    position                   : relative;
                }

                input[type="checkbox"]:checked::before {
                    content         : "\2713";
                    position        : absolute;
                    top             : -1px;
                    left            : -2px;
                    width           : 0.96rem;
                    height          : 0.96rem;
                    background-color: #657afe;
                    border          : 1px solid #657afe;
                    color           : #fff;
                    text-align      : center;
                    font-size       : 0.8rem;
                    border-radius   : 50%;
                }

                p {
                    margin-left: 0.32rem;
                    font-size  : 0.64rem;
                    color: #666;
                    a {
                        font-size: 0.64rem;
                        color    : #B77400;
                        text-decoration: none;
                    }
                }
            }

            .button_wrap {
                margin-top     : 0.8rem;
                display        : flex;
                justify-content: center;
                align-items    : center;
                width          : 100%;
                height         : 2.133333rem;
                background     : linear-gradient(148deg, #FFDE87 0%, #F3CA5C 100%);
                border-radius  : 1.066667rem;
                color          : #5B3C0C;
                font-size      : 0.906667rem;
                font-weight: bold;
            }
        }
    }
}


// 充值成功
/*充值成功*/
.success_pay_wrap {
    background: #fff;

    .head_img {
        padding-top    : 2.666667rem;
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;

        img {
            width : 6.026667rem;
            height: 4.773333rem;
        }

        h2 {
            padding-top: 0.64rem;
            color      : #57B06C;
            font-size  : 1.013333rem;
        }
    }

    ul {
        display        : flex;
        justify-content: space-between;
        align-items    : center;
        padding        : 1.066667rem 4.026667rem;

        li {
            text-align: center;

            h2 {
                color        : #323232;
                font-size    : 0.96rem;
                margin-bottom: 0.106667rem;
            }

            p {
                color    : #999999;
                font-size: 0.746667rem;
            }
        }
    }

    .once_wrap {
        margin-top   : 0.293333rem;
        margin-bottom: 2.8rem;
        font-size    : 0.746667rem;
        color        : #999;
        text-align   : center;

        span {
            color    : #323232;
            font-size: 0.96rem;
        }
    }

    .pay_success_btn {
        margin         : 0 auto;
        display        : flex;
        justify-content: center;
        align-items    : center;
        width          : 17.866667rem;
        height         : 2.133333rem;
        background     : #57B06C;
        border-radius  : 1.013333rem;
        font-size      : 0.96rem;
        color          : #fff;
    }
}

// 充值失败
.fail_pay_wrap {
    .head_img {
        padding-top    : 2.666667rem;
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;

        img {
            width : 6.026667rem;
            height: 4.773333rem;
        }

        h2 {
            padding-top: 0.64rem;
            color      : #D15B62;
            font-size  : 1.013333rem;
        }

        p {
            margin-top: 0.266667rem;
            font-size : 0.746667rem;
            color     : #ccc;
        }
    }
}


// 阴影
.fixed_wrap {
    position  : fixed;
    top       : 0;
    left      : 0;
    z-index   : 9;
    width     : 100%;
    height    : 100%;
    background: rgba(0, 0, 0, 0.8);
}

.alert_wrap {
    position     : fixed;
    left         : 50%;
    top          : 1.68rem;
    z-index      : 10;
    transform    : translateX(-50%);
    width        : 17.066667rem;
    height       : 16.533333rem;
    background   : #fff;
    border-radius: 0.4rem;
    padding      : 0.853333rem;
    box-sizing   : border-box;

    .head {
        position     : relative;
        margin-bottom: 1.28rem;

        img {
            position: absolute;
            left    : 0;
            top     : 0.346667rem;
            width   : 0.602667rem;
            height  : 0.602667rem;
        }

        h2 {
            text-align    : center;
            font-size     : 0.906667rem;
            color         : #000000;
            font-weight   : 400;
            line-height   : 1.28rem;
            letter-spacing: 1px;
        }
    }

    .name {
        text-align    : center;
        font-size     : 0.853333rem;
        font-weight   : 400;
        color         : #000000;
        line-height   : 1.2rem;
        letter-spacing: 1px;
        padding-bottom: 0.48rem;
    }

    .number {
        text-align    : center;
        color         : #000;
        font-weight   : bold;
        font-size     : 2.133333rem;
        padding-bottom: 0.96rem;
        border-bottom : 1px solid #E6E6E6;
    }

    .two_wrap {
        padding        : 0.88rem 0;
        display        : flex;
        justify-content: space-between;
        align-items    : center;

        .left_name {
            font-size: 0.746667rem;
            color    : #6E726E;
        }

        .right_wrap {
            display        : flex;
            justify-content: flex-start;
            align-items    : center;
            font-size      : 0.746667rem;
            color          : #000;

            img {
                margin-right: 0.266667rem;
                width       : 1.066667rem;
                height      : 1.066667rem
            }
        }
    }
}

// 密码

.password-div input {
    width  : 1px;
    height : 1px;
    opacity: 0;
    border : 0;
}

.password-lable {
    height: 2.56rem;
    clear : both;

    li {
        float       : left;
        width       : 2.56rem;
        height      : 2.56rem;
        line-height : 2.56rem;
        text-align  : center;
        border      : 1px solid #E6E6E6;
        border-right: none;

        &:last-child {
            border-right: 1px solid #E6E6E6;
        }
    }
}

// 关注公众号
.gzh_shown {
    position  : fixed;
    left      : 0;
    top       : 0;
    right     : 0;
    bottom    : 0;
    z-index   : 9;
    background: rgba(0, 0, 0, 0.9);

    .img_wrap {
        position : fixed;
        left     : 50%;
        top      : 8.8rem;
        transform: translateX(-50%);
        z-index  : 11;
        width    : 7.6rem;
        height   : 8.32rem;

        img {
            display: block;
            width  : 7.6rem;
            height : 8.32rem;
        }
    }

    .gzh_content {
        position       : fixed;
        left           : 50%;
        top            : 13.866667rem;
        transform      : translateX(-50%);
        z-index        : 10;
        width          : 14.16rem;
        height         : 13.44rem;
        background     : #fff;
        border-radius  : 1.146667rem;
        box-sizing     : border-box;
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        padding-top    : 5.466667rem;

        h2 {
            font-size: 0.8rem;
            color    : #323232;
        }

        p {
            padding-top: 0.213333rem;
            font-size  : 0.693333rem;
            color      : #666;
        }

        .btn_box {
            margin-top   : 2.213333rem;
            width        : 10.533333rem;
            height       : 2.053333rem;
            background   : linear-gradient(162deg, #FFE595 0%, #EABC56 100%);
            border-radius: 1.12rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #532400;
            font-size: 0.906667rem;
        }
    }
}